<template>
    <div
        id="log-printer"
        v-infinite-scroll="loadData"
        class="log-printer"
        :style="{
            'background-color': dark ? 'black' : backgroundColor,
            'scroll-behavior': smooth ? 'smooth' : '',
            fontSize,
            color: dark ? 'white' : color,
            width,
            height,
            maxWidth,
            maxHeight,
            minWidth,
            minHeight,
            lineHeight
        }"
        @scroll.passive="throttleScroll"
    >
        <div v-for="(item, index) in logList" :key="index" class="log" :class="[`log__${item.type}`]">
            {{ item.msg }}
        </div>
        <div class="log logo__freeze"></div>
    </div>
</template>

<script>
import { debounce, throttle } from '@isyscore/utils/func';
import infiniteScroll from 'vue-infinite-scroll';

function onScroll(ev) {
    if (ev.target.scrollHeight - ev.target.scrollTop - ev.target.clientHeight <= 20) {
        this.autoScroll = true;
    } else {
        this.autoScroll = false;
    }
}
export default {
    name: 'LogPrinter',
    directives: { infiniteScroll },
    props: {
        // 暗色风格
        dark: {
            type: Boolean,
            default: false
        },
        // 平滑滚动
        smooth: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: '100%'
        },
        maxWidth: {
            type: String,
            default: ''
        },
        minWidth: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: '300px'
        },
        maxHeight: {
            type: String,
            default: ''
        },
        minHeight: {
            type: String,
            default: ''
        },
        fontSize: {
            type: String,
            default: '14px'
        },
        lineHeight: {
            type: String,
            default: '1.2'
        },
        color: {
            type: String,
            default: '#666'
        },
        backgroundColor: {
            type: String,
            default: ''
        }
    },
    data: () => ({
        logList: [],
        autoScroll: true
    }),
    mounted() {
        this.container = document.getElementById('log-printer');
    },

    methods: {
        closeAutoScroll() {
            this.autoScroll = false;
        },
        clearlog() {
            this.logList = [];
        },
        print(type, msg, offsetIndex = 0, replaceEnd = false) {
            this.logList.splice(this.logList.length + offsetIndex - Number(replaceEnd), Number(replaceEnd), {
                type,
                msg
            });

            if (!this.autoScroll) return;

            this.$nextTick(() => {
                this.container.scrollTop = this.container.scrollHeight;
            });
        },
        log(msg, offsetIndex) {
            this.print('default', msg, offsetIndex);
        },
        warning(msg, offsetIndex) {
            this.print('warning', msg, offsetIndex);
        },
        error(msg, offsetIndex) {
            this.print('error', msg, offsetIndex);
        },
        success(msg, offsetIndex) {
            this.print('success', msg, offsetIndex);
        },
        logEnd(msg) {
            this.print('default', msg, 0, true);
        },
        warningEnd(msg) {
            this.print('warning', msg, 0, true);
        },
        errorEnd(msg) {
            this.print('error', msg, 0, true);
        },
        successEnd(msg) {
            this.print('success', msg, 0, true);
        },
        throttleScroll: throttle(onScroll, 1000, true),
        loadData() {
            this.$emit('scroll');
        }
    }
};
</script>

<style scoped lang="scss">
.log-printer {
    overflow-y: auto;
    padding: 12px;
    border-radius: 2px;
    .log {
        margin-bottom: 10px;
        &__default {
            color: inherit;
            // color: #333;
        }
        &__error {
            color: #fe694a;
        }
        &__warning {
            color: #ffba00;
        }
        &__success {
            color: #00d38d;
        }
    }
}
</style>
